<template>
	<view class="contain ">
			<view class="top ">
				<view class="top-img">
					<image :src="listImage"></image>
				</view>
				<view class="top-title">
					<text>{{title}}</text>
				</view>
			</view>
			<view class="left-refund between">
				<text>退款原因</text>
				<view>
					<text v-if="reason=='请选择'" class="right-text" @click="showBottomVisible = true">{{reason}}</text>
					<text v-else class="right-money" @click="showBottomVisible = true">{{reason}}</text>
					<choose custom-class="bottom-popup" position="bottom" v-model="showBottomVisible" >
						<view class="refund-reason">
							<text>退款原因</text>
						</view>
						<view class="reason" v-for="(item,i) in reasonlist" :key="i" >
							<view  @click="reasonClick(item)" >
								<text>{{item.reason}}</text>
								<view class="source" :class="[item.checked?'glance-shop-cart-itemselected-img':'']"></view>
							</view>
						</view>
						<view class="reason-foot" @click="showBottomVisible =false">
							<view>
								<text>取消</text>
							</view>
						</view>
					</choose>
					<text>></text>
				</view>
			</view>
			<view class="left-refund">
				<text>退款金额</text>
				<text class="orange">￥{{refundamount}}</text>
				<text class="right-text">( 不包含运费 )</text>
			</view>
			<view class="left-refund">
				  <text>退款说明</text>
				  <input @input="descInput" v-model="refundMessage" placeholder="选填" />
			</view>
			
		<view class="bottom" @click="submit">提交申请</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	import choose from '../../components/s-popup/index.vue';
export default {
	
	components:{
		wPicker,
		xflSelect,
		choose
	},
	data() {
		return {
			reasonlist: [
				{
					reason:'卖家发错货',
				},
				{
					reason:'少发/漏发',
				},
				{
					reason:'商品信息描述不符',
				},
				{
					reason:'收到商品时有划痕或破损',
				},
				{
					reason:'其他原因',
				},
			],
			//退款原因
			reason:'请选择',
			id:'',
			orderid:'',
			refundMessage:'',
			orderNumber:'',
			title:'',
			listImage:'',
			//退款金额
			refundamount:'',
			//底部弹窗
			showBottomVisible:false,
		};
	},
	onLoad:function(options) {
		console.log("传过来的参数-------------->",options)
		let item = JSON.parse(decodeURIComponent(options.item));
		this.id = item.goodsOrderDetailList[0].id
		this.orderid = item.id
		this.orderNumber = item.orderNumber
		this.title = item.goodsOrderDetailList[0].title
		this.listImage = item.goodsOrderDetailList[0].listImage
		this.refundamount = (parseFloat(item.goodsOrderDetailList[0].payAmount)-parseFloat(item.goodsOrderDetailList[0].freight)).toFixed(2)
		console.log("this.id--------------------->",this.id)
		console.log("this.orderNumber------------>",this.orderNumber)
		console.log("this.title------------------>",this.title)
		console.log("this.listImage-------------->",this.listImage)
		console.log("this.refundamount----------->",this.refundamount)
	},

	methods:{
		//退款原因
		reasonClick:function(item){
			
			this.reasonlist.forEach(res=>{
				res.checked=false
			})
			
			item.checked = true;
			
			if(item.checked===true){
				this.reason = item.reason
				console.log("reason",this.reason)
			}
			
			this.showBottomVisible=false
			
		},
		//提交申请
		submit() {
			
			if (this.reason === "请选择") {
				uni.showToast({
					icon: 'none',
					title: '退款原因不能为空!',
					duration: 3000
				});
				return;
			}
		
			var params = {
				//退款原因
				applicationReason:this.reason,
				bustype:"3",
				id:this.id,
				//退款説明
				reasonDescription:this.refundMessage
			}
			this.$postApi(this.$path.GOODS_AFTERSALE_DEATIL,params).then(res => {
				console.log("提交申请返回结果--------------------->",res.data)
				if(res.data.success){
					this.pub.showError(res.data.success != true? '提交申请失败':'提交申请成功')
					let that = this
					let orderNumber = res.data.data.orderNumber
					setTimeout(function(){
						uni.redirectTo({
							url:'neworderdetail?id=' + that.orderid + '&orderNumber=' + orderNumber + '&type=3'
						});
					},1000)
				}
			})
		},
		descInput: function(event) {
		    this.refundMessage = event.target.value;
		       console.log("退款说明参数",this.refundMessage)    
		},
	}
};
</script>

<style lang="scss">
	
	
.contain {
	min-height: 100%;
	background: #f5f5f5;
	padding-top: 24upx;
	.top{
		height: 163upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background:rgba(255,255,255,1);
		padding: 0 30upx;
		font-size:34upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.top-img{
		width: 101upx;
		height: 101upx;
	}
	.top-img image{
		height: 100%;
		border-radius:7px;
	}
	.top-title{
		height: 95upx;
		display: flex;
		justify-content: space-between;
		margin-left: 18upx;
	}
	.top-title text{
		overflow: hidden;
		white-space: normal ;
		text-overflow: ellipsis;
		
		display: -webkit-box;
		
		-webkit-line-clamp: 2;
		
		/*! autoprefixer: off */
		
		-webkit-box-orient: vertical;
	}
	//
	.left-refund{
		height: 111upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background:rgba(255,255,255,1);
		padding-left: 22upx;
		font-family:PingFang SC;
		font-weight:400;
		margin-top: 20upx;
	}
	.left-refund text{
		font-size:30upx;
		color:rgba(26,26,26,1);
		margin-right: 27upx;
	}
	.left-refund input{
		width: 560upx;
		font-size:28upx;
		color:rgba(0,0,0,1);
		
	}
	.right-text{
		color:rgba(153,153,153,1)!important;
	}
	.right-money{
		color:rgba(0,0,0,1)!important;
	}
	
	.bottom-popup .refund-reason text{
		height: 112upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:36upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(77,77,77,1);
	}
	.bottom-popup .reason view text{
		font-size:32upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(38,38,38,1);
	}
	.reason{
		padding: 0upx 34upx 0 24upx;
	}
	.reason view{
		height: 97upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1upx solid rgba(230,230,230,1);;
	}
	.reason-foot{
		height: 110upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background:linear-gradient(-90deg,rgba(255,94,4,1),rgba(249,140,45,1));
	}
	.bottom-popup .reason-foot text{
		font-size:36upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	.bottom-popup .reason view .source{
		width:34upx;
		height:34upx;
		border-radius:50%;
		border:2upx solid rgba(204,204,204,1);
	}
	.glance-shop-cart-itemselected-img{width: 34upx;height: 34upx;background-size:34upx 34upx;background-repeat:no-repeat;
	
	
		background-image: url()
		
		}
	.left-refund>.orange{
		font-size:36upx;
		font-weight:500;
		color:rgba(255,94,4,1);
	}
	.between{
		display: flex;
		justify-content: space-between;
	}
	.between view .right-text{
		margin-right: 13upx;
	}
	.bottom {
		position: fixed;
		bottom: 0upx;
		width: 100%;
		height: 110upx;
		background:linear-gradient(-90deg,rgba(255,94,4,1),rgba(249,140,45,1));
		background-blend-mode: normal, normal;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
}
.run-sign-go {
		position: fixed;
		
		background-color: rgba(0,0,0,0.8);
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		z-index: 9999;
		
		}

</style>
